<!--  -->
<template>
  <div class="main-content dataDictionary">
    <div class="current-owned-system-tags">
      <el-card>
        <div class="titleTextBox">
          <div class="titleText">
            <i class="iconfont iconliebiao"></i>
            <span class="text">当前系统列表</span>
          </div>
          <div class="handle-btn-box">
            <el-button type="primary" size="medium">新增系统</el-button>
          </div>
        </div>
        <div class="tag-list-box">
          <el-tag
            v-for="tag in tags"
            :key="tag.name"
            closable
            @close="handleClose(tag)"
          >
            {{ tag.name }}
          </el-tag>
        </div>
      </el-card>
    </div>

    <div class="dictionary-list-box">
      <el-card>
        <div class="left-box">
          <div class="titleTextBox">
            <div class="titleText">
              <i class="iconfont iconliebiao"></i>
              <span class="text">字典列表</span>
            </div>
            <div class="handle-btn-box">
              <el-button type="text" @click="openDictionaryModal()"
                >字典管理</el-button
              >
            </div>
          </div>
          <div class="dictionary-tree-box">
            <div class="dictionary-btn-box"></div>
            <el-tree
              :data="data"
              :props="defaultProps"
              @node-click="handleNodeClick"
            ></el-tree>
          </div>
        </div>
        <div class="dictionary-content-box">
          <div class="dictionary-tabs-box">
            <el-tabs
              v-model="editableTabsValue"
              type="card"
              closable
              @tab-remove="removeTab"
            >
              <el-tab-pane
                v-for="item in editableTabs"
                :key="item.name"
                :label="item.title"
                :name="item.name"
                class="dictionary-tab-pane"
              >
                <div class="system-item-text">
                  <div class="item-title">所属系统</div>
                  <ul class="system-item-list">
                    <li>委托书编号</li>
                    <li>维修类别</li>
                    <li>客户名称</li>
                    <li>自店销售</li>
                    <li>底盘号</li>
                  </ul>
                </div>
                <div class="system-brand-list">
                  <div
                    class="system-brand-item"
                    v-for="(tag, tagIndex) in tags"
                    :key="tagIndex"
                  >
                    <div class="brand-name">{{ tag.name }}</div>
                    <div class="system-brand-input-list">
                      <el-form ref="dcmsForm" :model="tag.submitForm">
                        <el-input v-model="tag.submitForm.attorney"></el-input>
                        <el-input v-model="tag.submitForm.category"></el-input>
                        <el-input v-model="tag.submitForm.cusName"></el-input>
                        <el-input v-model="tag.submitForm.saleType"></el-input>
                        <el-input v-model="tag.submitForm.vin"></el-input>
                      </el-form>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 删除系统  -->
    <bi-modal
      :showModal="showDeleteModal"
      sureText="删除"
      modalType="small"
      @cancel="showDeleteModal = false"
      @submit="submitDeleteSystem()"
    >
      <template v-slot:body>
        <div class="modal-tips">确认删除此系统吗？</div>
      </template>
    </bi-modal>

    <!-- 字典管理 -->
    <bi-modal
      title="字典管理"
      :showModal="showDictionaryModal"
      modalType="medium"
      @cancel="showDictionaryModal = false"
      @submit="submitDictionaryManagement()"
    >
      <template v-slot:body>
        <div class="dictionaryModalTree">
          <el-tree
            :data="dictionaryData"
            node-key="id"
            default-expand-all
            :expand-on-click-node="false"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span>
                <el-button type="text" size="mini" @click="() => append(data)">
                  新增
                </el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="() => remove(node, data)"
                >
                  删除
                </el-button>
              </span>
            </span>
          </el-tree>
        </div>
      </template>
    </bi-modal>

    <!-- 字典管理 新增字典 -->
    <bi-modal
      :showModal="showAddDictionaryModal"
      sureText="保存"
      modalType="medium"
      @cancel="showAddDictionaryModal = false"
      @submit="submitAddDictionary()"
    >
      <template v-slot:body>
        <div class="form-label">字典名称</div>
        <el-input
          v-model="addDictionaryValue"
          placeholder="请输入字典名称"
        ></el-input>
      </template>
    </bi-modal>
  </div>
</template>

<script>
import Modal from "../../components/Modal";
let id = 1000;
export default {
  components: {
    "bi-modal": Modal,
  },
  data() {
    return {
      tags: [
        {
          name: "广汽三菱-DCMS",
          submitForm: {
            attorney: "",
            category: "",
            cusName: "",
            saleType: "",
            vin: "",
          },
        },
        {
          name: "广汽本田-DMS",
          submitForm: {
            attorney: "",
            category: "",
            cusName: "",
            saleType: "",
            vin: "",
          },
        },
        {
          name: "广汽丰田-DMS",
          submitForm: {
            attorney: "",
            category: "",
            cusName: "",
            saleType: "",
            vin: "",
          },
        },
        {
          name: "一汽大众-DMS",
          submitForm: {
            attorney: "",
            category: "",
            cusName: "",
            saleType: "",
            vin: "",
          },
        },
      ],
      showDeleteModal: false, // 控制 删除系统标签的modal显示
      currentClickTag: "",
      data: [
        {
          label: "盈利能力",
          children: [
            {
              label: "毛利",
            },
            {
              label: "产值",
            },
            {
              label: "保养产值",
            },
          ],
        },
        {
          label: "客户管理",
          children: [
            {
              label: "预约满意度",
            },
            {
              label: "首保满意度",
            },
          ],
        },
        {
          label: "服务贡献",
          children: [
            {
              label: "服务周转率",
            },
            {
              label: "工位周转率",
            },
          ],
        },
        {
          label: "人员贡献",
          children: [
            {
              label: "人均接车台次",
            },
            {
              label: "人均交车台次",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      showDictionaryModal: false, // 控制字典管理modal 显示
      dictionaryData: [
        {
          id: 1,
          label: "盈利能力",
          children: [
            {
              id: 11,
              label: "毛利",
            },
            {
              id: 12,
              label: "产值",
            },
            {
              id: 13,
              label: "保养产值",
            },
          ],
        },
        {
          id: 2,
          label: "客户管理",
          children: [
            {
              id: 21,
              label: "预约满意度",
            },
            {
              id: 22,
              label: "首保满意度",
            },
          ],
        },
        {
          id: 3,
          label: "服务贡献",
          children: [
            {
              id: 31,
              label: "服务周转率",
            },
            {
              id: 32,
              label: "工位周转率",
            },
          ],
        },
      ], // 字典列表
      showAddDictionaryModal: false, // 字典管理 新增字典modal显示
      addDictionaryValue: "",
      currentDictionaryData: {}, // 当前点击新增的字典数据
      editableTabsValue: "1",
      editableTabs: [
        {
          title: "工单",
          name: "1",
        }
      ],
      tabIndex: 1,
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods: {
    // 删除系统标签
    handleClose(tag) {
      this.showDeleteModal = true;
      this.currentClickTag = tag;
    },
    // 确认删除
    submitDeleteSystem() {
      this.tags.splice(this.tags.indexOf(this.currentClickTag), 1);
      this.showDeleteModal = false;
    },
    // 点击 数据字典
    handleNodeClick(data) {
      console.log(data);
    },
    // 打开 管理字典modal
    openDictionaryModal() {
      this.showDictionaryModal = true;
    },
    // 字典管理 modal确认
    submitDictionaryManagement() {
      this.showDictionaryModal = false;
    },
    // 字典管理 新增字典
    append(data) {
      this.currentDictionaryData = data;
      this.showAddDictionaryModal = true;
    },
    // 字典管理 删除字典
    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      children.splice(index, 1);
    },
    // 字典管理 新增字典 确认
    submitAddDictionary() {
      if (this.addDictionaryValue.trim() != "") {
        let data = this.currentDictionaryData;
        const newChild = {
          id: id++,
          label: this.addDictionaryValue,
          children: [],
        };
        if (!data.children) {
          this.$set(data, "children", []);
        }
        data.children.push(newChild);
        this.showAddDictionaryModal = false;
        this.addDictionaryValue = "";
      } else {
        this.$message.error("字典名称不能为空");
        return;
      }
    },
    // 增加tab
    addTab(targetName) {
      console.log("add targetName", targetName);
      let newTabName = ++this.tabIndex + "";
      this.editableTabs.push({
        title: "New Tab",
        name: newTabName,
        submitForm: {
          attorney: "",
          category: "",
          cusName: "",
          saleType: "",
          vin: "",
        },
      });
      this.editableTabsValue = newTabName;
    },
    // 移除tab
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
    },
  },
};
</script>
<style lang="less">
.dataDictionary {
  .current-owned-system-tags {
    .titleTextBox {
      .titleTextBox();
    }
    .tag-list-box {
      margin-top: 10px;
      .el-tag {
        margin-right: 10px;
      }
    }
  }
  .dictionary-list-box {
    margin-top: 20px;
    .el-card {
      .el-card__body {
        .alignCenter(flex, unset, unset);
      }

      .left-box {
        width: 250px;
        flex: 0 0 250px;
        height: 100%;
        .titleTextBox {
          .titleTextBox();
        }
        .dictionary-tree-box {
          width: 250px;
          height: 100%;
          border-right: 1px solid @border-color-lighter;
          .el-tree {
            margin-top: 10px;
          }
        }
      }

      .dictionary-content-box {
        flex: 1;
        margin-left: 20px;
        .dictionary-tabs-box {
          .dictionary-tab-pane {
            .alignCenter(flex, unset, unset);
            .system-item-text {
              width: 100px;
              flex: 0 0 100px;
              .item-title {
                width: 100px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                font-weight: 600;
                color: @color-text-primary;
              }
              .system-item-list {
                font-size: 13px;
                color: @color-text-regular;
                li {
                  width: 100px;
                  height: 40px;
                  line-height: 40px;
                  text-align: center;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  margin-bottom: 10px;
                }
              }
            }
            .system-brand-list {
              flex: 1;
              width: 0;
              overflow-x: auto;
              .alignCenter(flex,unset,unset);
              .system-brand-item {
                width: 150px;
                margin-left: 15px;
                .brand-name {
                  width: 150px;
                  height: 40px;
                  line-height: 40px;
                  text-align: center;
                  font-weight: 600;
                  color: @color-text-primary;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                }
                .system-brand-input-list{
                  .el-input{
                    margin-bottom: 10px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .form-label {
    color: @color-text-regular;
    margin-bottom: 10px;
  }
}
</style>
